<template>
  <div class="px-4 d-flex gap-row-8">
    <Tag
      v-for="tab in tabs"
      :key="`tab-${tab.value}`"
      :selected-bg="tab.value === activeTab"
      :label="$t(tab.label)"
      :value="tab.value"
      @click="onTabClicked"
    ></Tag>
  </div>
  <div class="medias">
    <!-- 5.525 是 SearchMain.vue 裡的 TopTabs 高度 + 上面那個 Tag 高度 -->
    <ScrollTabView v-model="media" :tab-options="TAB_MEDIA" :height-trim-rem="5.525" @load="nextPage">
      <template #tab-content-1>
        <MediaRow
          class="px-4"
          :items="fetcher.video.dataList"
          :loading="fetcher.video.loading"
          :no-more="fetcher.video.noMore"
          @click:item="onItemClick"
        ></MediaRow>
      </template>
      <template #tab-content-2>
        <MediaRow
          class="px-4"
          :items="fetcher.photo.dataList"
          :loading="fetcher.photo.loading"
          :no-more="fetcher.photo.noMore"
          @click:item="onItemClick"
        ></MediaRow>
      </template>
    </ScrollTabView>
  </div>
</template>
<script setup>
import { computed, onActivated, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useSearchStore } from '@/store/search'
import Tag from '@/components/common/Tag.vue'
import ScrollTabView from '@/components/layout/ScrollTabView.vue'
import MediaRow from '@/components/media/MediaRow.vue'
import { useNavRefresh } from '@/compositions/nav/refresh'
import { useInfinite } from '@/compositions/request/infinite'
import { FAVORITE_TAB, MEDIA_TYPE, NAVS } from '@/constant'
import { TAB_MEDIA } from '@/constant/config'
import API from '@/http'

const { t: $t } = useI18n()

const route = useRoute()
const router = useRouter()

const searchStore = useSearchStore()
const { media } = storeToRefs(searchStore)
const { updateViewerRouterOriginPath, toIndexedMainViewer, toMainViewer } = searchStore

const tabs = [
  { label: 'tab.purchased', value: FAVORITE_TAB.PURCHASED },
  { label: 'tab.liked', value: FAVORITE_TAB.LIKED },
]
const activeTab = ref(route.query?.type === FAVORITE_TAB.LIKED ? FAVORITE_TAB.LIKED : FAVORITE_TAB.PURCHASED)
const onTabClicked = (value) => (activeTab.value = value)

const likeFetcher = ref({
  video: useInfinite({
    request: API.Media.getFavorite,
    params: { type: MEDIA_TYPE.VIDEO, favorite_type: 'like' },
  }),
  photo: useInfinite({
    request: API.Media.getFavorite,
    params: { type: MEDIA_TYPE.PHOTO, favorite_type: 'like' },
  }),
})
const purchasedFetcher = ref({
  video: useInfinite({
    request: API.Media.getFavorite,
    params: { type: MEDIA_TYPE.VIDEO, favorite_type: 'buy' },
  }),
  photo: useInfinite({
    request: API.Media.getFavorite,
    params: { type: MEDIA_TYPE.PHOTO, favorite_type: 'buy' },
  }),
})
const fetcher = computed(() => (activeTab.value === FAVORITE_TAB.LIKED ? likeFetcher.value : purchasedFetcher.value))
function refresh(type) {
  setTypePath(type)
  likeFetcher.value.video.refresh()
  likeFetcher.value.photo.refresh()
  purchasedFetcher.value.video.refresh()
  purchasedFetcher.value.photo.refresh()
}
onActivated(() => {
  // 必須先讓 SearchMain 完成 updateViewerRouterOriginPath，不然路徑會錯亂
  requestAnimationFrame(() => {
    setTypePath(activeTab.value)
    toMainViewer(fetcher.value)
  })
})

watch(
  activeTab,
  async (v) => {
    setTypePath(v)
    fetcher.value.video.init()
    fetcher.value.photo.init()
    toMainViewer(fetcher.value)
  },
  { immediate: true },
)

const nextPage = computed(() => media.value === MEDIA_TYPE.VIDEO ? fetcher.value.video.nextPage : fetcher.value.photo.nextPage) // prettier-ignore

function onItemClick(index) {
  toIndexedMainViewer(index)
}

function setTypePath(type) {
  router.replace({ query: { type } }).then(updateViewerRouterOriginPath)
}

useNavRefresh(NAVS.SEARCH, () => {
  refresh(activeTab.value)
})
</script>
<style scoped lang="scss">
.medias {
  height: calc(100% - 2.25rem);
}
</style>
